<template>
  <view class="components-item">
    <view class="userImage">
      <image mode="aspectFill" :src="commentItem.avatar"></image>
      <view class="icon" v-if="index<3 && index>=0">
        <image mode="aspectFit" :src="image_host+'icon_comment'+(index+sendIndex)+'.png'"></image>
      </view>
    </view>
    <view class="contents">
      <view class="user-info">
        <view class="user-name-box">
          <view class="username">{{ commentItem.nickName }}</view>
          <view @click="edit" class="comment-edit" v-if="commentItem.owerFlag">修改</view>
        </view>
        <view class="huizhang">
          <daren v-if="commentItem.commentLevel>0" :type="1" :index="commentItem.commentLevel"></daren>
          <daren v-if="commentItem.shineLevel>0" :type="2" :index="commentItem.shineLevel"></daren>
        </view>
      </view>
      <view class="comment">
        <view class="text" v-html="commentItem.content"></view>
        <view class="images">
          <view class="image-item" v-for="(fileItem,index) in commentItem.picUrl"
                @click="showImages(index,commentItem.picUrl)" v-if="!fileItem.isHide">
            <image mode="aspectFill" v-if="fileItem.fileType==='image'" class="image" :src="fileItem.url"></image>
            <image mode="aspectFill" v-if="fileItem.fileType==='video'" class="image" :src="fileItem.thumbUrl"></image>
            <view class="video-play" v-if="fileItem.fileType==='video'">
              <image :src="image_host+'icon_play.png'"></image>
            </view>
            <view class="image-template" v-if="fileItem.templateId>0">
              <image :src="image_host_template+'t'+fileItem.templateId+'.png'"></image>
            </view>
          </view>
        </view>
        <view class="date-set">
          <view class="date">{{ commentItem.createTime }}</view>
          <view class="like button-item-active" :id="'like-'+index" @click="commentLike">
            <view class="icon">
              <image :src="image_host+(commentItem.likeFlag?'dianzan1.png':'dianzan2.png')" mode="aspectFill"></image>
            </view>
            <text>{{ commentItem.praiseNum }}点赞</text>
          </view>
        </view>
      </view>
    </view>
    <to-message ref="toMessage"></to-message>
  </view>
</template>

<script>
import toMessage from "@/pages/circle/components/toMessage.vue";
import daren from "@/pages/circle/components/daren.vue";

export default {
  components: {toMessage, daren},
  props: ['item', 'index', 'topicId', 'scrollTopComment', 'sendIndex'],
  data() {
    return {
      image_host: this.image_host + 'quanzi/',
      image_host_template: this.image_host + 'template/',
      commentItem: {}
    };
  },
  created() {

    this.item.picUrl = this.item.picUrl ? JSON.parse(this.item.picUrl) : []
    if (this.item.picUrl.length === 0) {
      this.item.picUrl = []
    }
    this.commentItem = this.item
  },
  methods: {
    async commentLike(e) {
      let url = this.commentItem.likeFlag ? 'circle/customer/comment/commentCancelLike' : 'circle/customer/comment/commentLike';
      let id = this.commentItem.id;
      let data = await this.$javaCircle.doRequest("get", url, {id}, '', false)
      this.commentItem.likeFlag = !this.commentItem.likeFlag
      this.commentItem.praiseNum += this.commentItem.likeFlag ? 1 : -1;
      if (data.data > 0) {
        this.showMessage(e, '积分+' + data.data)
      }
      this.$forceUpdate()
    },
    showMessage(e, title) {
      const query = uni.createSelectorQuery().in(this);
      query.select('#like-' + this.index).boundingClientRect(data => {
        this.$refs.toMessage.init(data.left + data.width - 20, data.top + data.height + 80, title)
      }).exec();
    },
    showImages(index, list) {
      this.$emit('showImages', index, list)
    },
    edit() {
      let url = '/pages/circle/details/saveMessage?id=' + this.topicId + '&info=' + JSON.stringify(this.commentItem) + '&scrollTopComment=' + this.scrollTopComment
      uni.navigateTo({url: url})
    },
  }
}
</script>

<style lang="scss" scoped>
.components-item {
  width: 100%;
  display: flex;
  margin-bottom: 30upx;
}

.userImage {
  width: 100upx;
  height: 100upx;
  border-radius: 50%;
  background-color: #666666;
  position: relative;
  margin-right: 18upx;

  image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .icon {
    position: absolute;
    width: 78upx;
    height: 70upx;
    bottom: -40upx;
    right: -10upx;
    margin-right: 8upx;
  }
}

.contents {
  flex: 1;
  height: auto;

  .user-info {
    height: 100upx;

    .user-name-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 32upx;
      color: #666666;
    }
  }
}

.comment {
  .text {
    font-size: 38upx;
    color: #333333;
    margin-bottom: 8upx;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }

  .images {
    display: flex;
    flex-wrap: wrap;
    column-count: 3;
    column-gap: 25upx;
    margin-top: 8upx;

    .image-item {
      width: 174upx;
      height: 174upx;
	  margin-bottom: 15upx;
      position: relative;

      .image {
        width: 100%;
        height: 100%;
      }

      .video-play {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .7);
        display: flex;
        align-items: center;
        justify-content: center;

        image {
          width: 62upx;
          height: 62upx;
        }
      }
    }
  }
}

.date-set {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 87upx;
  border-bottom: 1upx solid #D8D8D8;
  font-size: 26upx;
  color: #999999;
}

.like {
  //width: 300upx;
  //height: 36upx;
  font-size: 26upx;
  color: #999999;
  display: flex;
  justify-content: flex-end;

  .icon {
    width: 36upx;
    height: 36upx;

    image {
      width: 100%;
      height: 100%;
    }
  }
}

.huizhang {
  display: flex;
  align-items: center;
}

.image-template {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
